import { StyleSheet, Text, TextInput, View } from 'react-native'
import CustomButton from 'src/components/button/CustomButton'
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { IS_IPHONEX, ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import LinearGradient from 'react-native-linear-gradient'
import CustomImage from 'src/components/image/CustomImage'

export default class SendComponent extends PureComponent {
  static defaultProps = {
    paddingBottom: ScaleS(10),
    sendValue: '',
    placeholder: ''
  }

  static propTypes = {
    paddingBottom: PropTypes.number,
    sendValue: PropTypes.string,
    placeholder: PropTypes.string,
    onCommonWordPress: PropTypes.func,
    onCallPress: PropTypes.func,
    onSubmitEditing: PropTypes.func,
    textInputRef: PropTypes.func,
    keyboardShow: PropTypes.bool,
    canCallPhone: PropTypes.bool,
    onMoreOptionPress: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
      sendValue: props.sendValue
    }
  }

  _textInputRef = (ref) => {
    this.props.textInputRef(ref)
  }

  render () {
    const { paddingBottom, placeholder, onCommonWordPress, onCallPress, keyboardShow, canCallPhone, onMoreOptionPress } = this.props
    const { sendValue } = this.state
    return (
      <View style={[styles.sendContainer, { paddingBottom: paddingBottom }]}>
        <CustomButton style={styles.commonIcon} onPress={onCommonWordPress}>
          <Text style={styles.commonIconText}>常用语</Text>
        </CustomButton>
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.input}
            ref={this._textInputRef}
            value={sendValue}
            blurOnSubmit={false}
            selectionColor="#FED201"
            autoCorrect={false}
            placeholder={placeholder}
            onChangeText={this.onChangeText}
            onSubmitEditing={this._onSubmitEditing}
            textAlignVertical="center"
            returnKeyType="send"
          />
        </View>
        {!keyboardShow && (<CustomButton onPress={onMoreOptionPress}>
          <CustomImage
            style={styles.quickIcon}
            source={require('src/imgC/message/more_option.png')}
          />
        </CustomButton>)}
        {keyboardShow && (
          <CustomButton style={styles.commonIcon} onPress={this._onSubmitEditing}>
            <Text style={styles.commonIconText}>发送</Text>
          </CustomButton>)}
      </View>
    )
  }

  /**
   * input值change
   * @param sendValue
   */
  onChangeText = (sendValue) => {
    this.setState({ sendValue })
  }

  _onSubmitEditing = () => {
    const { onSubmitEditing } = this.props
    const { sendValue } = this.state
    onSubmitEditing && onSubmitEditing(sendValue)
    this.setState({ sendValue: '' })
  }
}

const styles = StyleSheet.create({
  sendContainer: {
    width: ScaleS(375),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingTop: ScaleS(10)
  },
  commonIcon: {
    marginHorizontal: ScaleS(20),
    justifyContent: 'center',
    alignItems: 'center'
  },
  commonIconText: {
    color: '#3C3C3C',
    fontSize: ScaleT(13),
    fontWeight: '500'
  },
  quickIcon: {
    width: ScaleS(35),
    height: ScaleS(35),
    marginLeft: ScaleS(10),
    marginRight: ScaleS(15)
  },
  inputContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: ScaleS(40),
    borderRadius: ScaleS(20),
    backgroundColor: '#fff'
  },
  input: {
    flex: 1,
    height: ScaleS(40),
    backgroundColor: 'rgba(243, 243, 243, 0.8)',
    borderRadius: ScaleS(20),
    paddingHorizontal: ScaleS(15)
  },
  commonContainer: {
    backgroundColor: '#ffffff'
  },
  commonContainerX: {
    paddingBottom: ScaleS(30)
  }
})
